<script setup lang="ts">
import type { CascaderDiff, CascaderUpdateModel } from '@/components/Cascader'
import { Message } from '@arco-design/web-vue'
// import { updateApiNodeUpdateCascadeRegionApi } from '@/apis/modules/node'
import { updateCdnNodeCascadeApi } from '@/apis/modules/cdn.ts'
import { ConfirmBox } from '@/components/Cascader'

interface IEmit {
  (event: 'update:visible', value: boolean): void
  (event: 'update:record', value: CascaderDiff[]): void
  (event: 'save'): void
}

interface IProps {
  visible: boolean
  record?: CascaderDiff[]
  tips?: string[]
  diffData?: CascaderUpdateModel
}

const props = defineProps<IProps>()
const emit = defineEmits<IEmit>()
async function handleSubmit(diff: CascaderDiff[]) {
  const data = (diff || props.record)?.map((item) => {
    return {
      cluster_id: item.to.region,
      cascade_level: item.to.level,
      id: item.node,
    }
  })
  await updateCdnNodeCascadeApi({ list: data })
  Message.success('操作成功')
  emit('save')
}

// dialog关闭
function handleDialogClose() {
  emit('update:record', [])
}

defineExpose({ save: handleSubmit })
</script>

<template>
  <resource-dialog
    title="保存提示"
    ok-text="保存"
    :width="800"
    :visible="visible"
    :before-ok="handleSubmit"
    :before-close="handleDialogClose"
    @update:visible="emit('update:visible', $event)"
  >
    <confirm-box
      :diff="record"
      :risks="tips"
    />
  </resource-dialog>
</template>

<style scoped lang="less"></style>
